//
//  MenuView.swift
//  SwiftUiBaseStudy
//
//  Created by Daniel on 2023/10/10.
//

import SwiftUI

struct MenuView: View {
    @EnvironmentObject var user:UserStore
    @Binding var showProfile:Bool
    
    var body: some View {
        VStack {
            Spacer()
            VStack(spacing:16) {
                Text("Swift ui study 24%")
                    .font(.caption)
                Color.white
                    .frame(width: 30,height: 6)
                    .cornerRadius(/*@START_MENU_TOKEN@*/3.0/*@END_MENU_TOKEN@*/)
                    .frame(width: 130,height: 6,alignment: .leading)
                    .background(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.08)))
                    .cornerRadius(3)
                    .frame(width: 150,height: 24)
                    .background(Color(#colorLiteral(red: 0.7882352941, green: 0.8196078431, blue: 0.862745098, alpha: 1)))
                    .cornerRadius(12)
                    .shadow(color: .black.opacity(0.2), radius: 20,x:0,y:20)
                MenuRow(title: "Account", icon: "gear")
                
                MenuRow(title: "Billing", icon: "creditcard")
                MenuRow(title: "Sign out", icon: "person.crop.circle")
                    .onTapGesture {
                        user.isLogged = false
//                        UserDefaults.standard.set(false, forKey: "isLogged")
                        showProfile = false
                    }
            }
            .frame(maxWidth: 712)
            .frame(height: 300)
//            .background(LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)), Color(#colorLiteral(red: 0.8705882353, green: 0.8941176471, blue: 0.9450980392, alpha: 1))]), startPoint: .top, endPoint: .bottom))
            .background(LinearGradient(gradient: Gradient(colors: [Color("background3"), Color("background3").opacity(0.6)]), startPoint: .top, endPoint: .bottom))
            .clipShape(RoundedRectangle(cornerRadius: 30,style: .continuous))
            .shadow(radius: 30)
            .padding(.horizontal,30)
            .overlay {
                Image("Avatar")
                    .resizable()
                    .frame(width: 60,height: 60)
                    .clipShape(Circle())
                    .offset(y:-150)
            }
        }
        .padding(.bottom,30)
    }
}

#Preview {
    MenuView(showProfile: .constant(true))
        .environmentObject(UserStore())
}

struct MenuRow:View {
    var title:String
    var icon:String
    var body: some View {
        HStack(spacing: 16){
            Image(systemName: icon)
                .font(.system(size: 20,weight: .light))
                .imageScale(.large)
                .frame(width: 16,height: 16)
                .foregroundColor(Color(#colorLiteral(red: 0.662745098, green: 0.7333333333, blue: 0.831372549, alpha: 1)))
            Text(title)
                .font(.system(size: 20,weight: .bold))
                .frame(width: 120,alignment: .leading)
        }
    }
}
